window.onload = function() {
	//	教研团队
	var swiper = document.getElementById('swiper');
	var ul = swiper.children[0];
	var lis = ul.children;
	var arr = document.getElementById("arr");
	var arrRight = document.getElementById("right");
	var arrLeft = document.getElementById("left");
	var timer = null;
	var imgWidth = swiper.offsetWidth;
	var firstImg = lis[0].cloneNode(true);
	//追加到ul后面
	ul.appendChild(firstImg);
	var pic = 0; //记录当前正在显示的图片的索引
	left.onclick = function() {
		//先判断 如果是第一个图片 先让ul瞬间跳到最后的位置 然后索引也要到最后
		if(pic === 0) {
			ul.style.left = -(lis.length - 1) * imgWidth + "px";
			pic = lis.length - 1; //索引也要归零
		}
		pic--; //计算出将要显示的图片的索引
		//目标 和pic有关 和 图片宽度有关 而且是负数
		var target = -pic * imgWidth;
		$(ul).animate({
			'left': target + 'px'
		}, 200);
	};
	right.onclick = function() {
		//先判断 如果是最后一个图片 先让ul瞬间跳会开始位置 然后索引也要归零
		if(pic === lis.length - 1) {
			ul.style.left = 0 + "px";
			pic = 0; //索引也要归零
		}
		pic++; //计算出将要显示的图片的索引
		//目标 和pic有关 和 图片宽度有关 而且是负数
		var target = -pic * imgWidth;
		//  animate(ul, target);
		$(ul).animate({
			'left': target + 'px'
		}, 200);
	};
	//	自动播放
	function playNext() {
		//先判断当前图片的索引pic是否等于最后一张图片的索引ulLis.length-1
		//如果相等马上跳过去然后在执行动画效果 从而实现无缝滚动
		//并且把索引号也归零
		if(pic == lis.length - 1) {
			ul.style.left = 0;
			pic = 0;
		}
		pic++; //pic++相当于 pic=pic+1;
		//通过动画函数对ul进行移动
		//target 和 图片索引 和 图片宽度 有关 而且是负数
		var target = -pic * imgWidth;
		$(ul).animate({
			'left': target + 'px'
		}, 200);
	}
	timer = setInterval(playNext, 3000);
	//鼠标经过 清理定时器停止自动播放
	swiper.onmouseover = function() {
		clearInterval(timer);
	}
	//鼠标离开box隐藏arr 设置定时器继续自动播放
	swiper.onmouseout = function() {
		timer = setInterval(playNext, 3000);
	}
	//  --------------------------------------------------------------
	//  团队tab栏切换
	var tbleft = document.getElementById('tbleft');
	var tbSpans = tbleft.querySelectorAll('.tbTop > span');
	var tbDivs = tbleft.querySelectorAll('.detail > div');
	//点击span让当前的span高亮
	for(var i = 0; i < tbSpans.length; i++) {
		//tbSpans[i].index = i;
		tbSpans[i].setAttribute("index", i);
		tbSpans[i].onclick = function() {
			//排他
			for(var i = 0; i < tbSpans.length; i++) {
				//tbSpans[i].className = "";
				tbSpans[i].removeAttribute("class");
			}
			this.setAttribute("class", "current");
			//让下面对应的li也显示出来
			for(var i = 0; i < tbDivs.length; i++) {
				tbDivs[i].style.display = 'none';
			}
			var index = this.getAttribute("index");
			tbDivs[index].style.display = 'block';
		};
	}
	//  --------------------------------------------------------------
	//	学生学习第二个轮播图
	var swiper2 = document.getElementById('swiper2');
	var ulT = swiper2.children[0];
	var lisT = ulT.children;
	var arr2 = document.getElementById("arr2");
	var arrRightT = document.getElementById("right2");
	var arrLeftT = document.getElementById("left2");
	var timerT = null;
	var imgWidthT = swiper2.offsetWidth;
	var firstImgT = lisT[0].cloneNode(true);
	ulT.appendChild(firstImgT);
	var picT = 0; 
	arrLeftT.onclick = function() {
		if(picT === 0) {
			ulT.style.left = -(lisT.length - 1) * imgWidthT + "px";
			picT = lisT.length - 1; 
		}
		picT--; 
		var target = -picT * imgWidthT;
		$(ulT).animate({
			'left': target + 'px'
		}, 200);
	};
	arrRightT.onclick = function() {
		if(picT === lisT.length - 1) {
			ulT.style.left = 0 + "px";
			picT = 0; 
		}
		picT++; 
		var target = -picT * imgWidthT;
		$(ulT).animate({
			'left': target + 'px'
		}, 200);
	};
	function playNext2() {
		if(picT == lisT.length - 1) {
			ulT.style.left = 0;
			picT = 0;
		}
		picT++; 
		var target = -picT * imgWidthT;
		$(ulT).animate({
			'left': target + 'px'
		}, 200);
	}
	timerT = setInterval(playNext2, 3000);
	swiper2.onmouseover = function() {
		clearInterval(timerT);
	}
	swiper2.onmouseout = function() {
		timerT = setInterval(playNext2, 3000);
	}
}